<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/default">
<head>
    <meta charset="UTF-8">
</head>
<section layout:fragment="content">
    <div class="layui-fluid">
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title search-colla-title"><i
                        class="icon iconfont icon-circle"></i><span>查询条件</span></h2>
                <div class="layui-colla-content layui-show">
                    <form id="searchConfigForm" class="layui-form" action="" autocomplete="off">
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数据类名</label>
                                    <input id="dcTypeCode" class="layui-input eyc-uppercase" name="dcTypeCode" type="text">
                                </div>
                            </div>
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数据可选值</label>
                                    <input class="layui-input eyc-uppercase" name="dcOptionsCn" type="text">
                                </div>
                            </div>
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">&nbsp;</label>
                                    <div class="layui-row">
                                        <button type="button" onclick="refreshData();"
                                                class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">
                                            <i class="icon iconfont icon-search"></i>查询
                                        </button>
                                        <button type="button" onclick="clearParams();"
                                                class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue">
                                            <i class="icon iconfont icon-reset"></i><span>重置</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-sm6">
                <div class="layui-form-item eyc-margin-top15">
                    <label class="layui-colla-title"><i class="icon iconfont icon-circle"></i><span>年检价格表</span></label>
                </div>
                <div id="inspPriceRuleList"></div>
            </div>
            <div class="layui-col-sm6">
                <div class="layui-form-item eyc-margin-top15">
                    <label class="layui-colla-title"><i class="icon iconfont icon-circle"></i><span>车辆适用规则配置</span></label>
                </div>
                <div id="vehicleApPriceRuleConfigList"></div>
            </div>
        </div>
    </div>
    <script th:src="@{/layui/layui.js}"></script>
    <script>
        let config = {
            $priceRuleTable: $('#inspPriceRuleList'),
            $ruleConfigTable: $('#vehicleApPriceRuleConfigList')
        };
        let priceRuleColModel = [
            {dataIndx:'priceRuleNme',title:'规则名称',minWidth:180,align:'center',editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'safetyInspRate',title:'综检价格',minWidth:120,align:'center',editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'compInspRate',title:'综检价格',minWidth:120,align:'center',dataType: "float", format: "¥#,###.00",editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'epInspRate',title:'环保价格',minWidth:120,align:'center',dataType: "float", format: "#,###",editable:true, editEditable:true,editor : {type : "textbox"},}
            ,{dataIndx:'preferentialPrice',title:'优惠价格',minWidth:120,align:'center',editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'isActive',title:'是否有效',minWidth:120,align:'center',  editable:true, editEditable:true,type: 'checkbox', dataType: 'bool'}
            ];
        let ruleConfigColModel = [
            {dataIndx:'vehicleType',title:'车辆类型',minWidth:120,align:'center',editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'useCharacter',title:'使用性质',minWidth:120,align:'center',editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'energy',title:'能源类型',minWidth:120,align:'center',dataType: "float", format: "¥#,###.00",editable:true, editEditable:true,editor : {type : "textbox"}}
            ,{dataIndx:'remark',title:'说明',minWidth:200,align:'center',dataType: "float", format: "#,###",editable:true, editEditable:true,editor : {type : "textbox"},}
            ,{dataIndx:'isActive',title:'是否有效',minWidth:120,align:'center',  editable:true, editEditable:true,type: 'checkbox', dataType: 'bool'}
            ];
        let initPriceRuleTable=function(){
            let option = {
                width: '100%',
                dataModel: {
                    location: "remote",
                    recIndx:"inspPriceRuleId",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "JSON",
                    method:"POST",
                    url:"/eyc/searchInspPriceRules",
                    postData: eyc.pqGrid.searchParam,
                    getData: function (rs) {
                        return {data:rs.data};
                    },
                    error : eyc.ajax.ajaxError
                },
                colModel: priceRuleColModel,
                scrollModel: {autoFit: false},
                editModel : {
                    saveKey : $.ui.keyCode.ENTER, // 编辑回车键确认
                    keyUpDown : false // 编辑时关闭键盘控制单元格移动
//				clicksToEdit : 1
                },
                showTop: false,
                numberCell: {show: false },
                fillHandle: '',
                virtualX: false,
                virtualY: true,
                track: true,
                height:calcTableHeight(config.$priceRuleTable)
            };
            eyc.pqGrid.init(config.$priceRuleTable, option);
        };
        let initRuleConfigTable=function(){
            let option = {
                width: '100%',
                dataModel: {
                    location: "local",
                    recIndx:"apRuleConfigId"
                },
                colModel: ruleConfigColModel,
                scrollModel: {autoFit: false},
                editModel : {
                    saveKey : $.ui.keyCode.ENTER, // 编辑回车键确认
                    keyUpDown : false // 编辑时关闭键盘控制单元格移动
//				clicksToEdit : 1
                },
                showTop: false,
                numberCell: {show: false },
                fillHandle: '',
                virtualX: false,
                virtualY: true,
                track: true,
                height:calcTableHeight(config.$ruleConfigTable)
            };
            eyc.pqGrid.init(config.$ruleConfigTable, option);
        };
        let calcTableHeight=($tableContainer)=>{
            var paddingTop=$('body').css('padding-top');
            var bodyPaddingHeight=paddingTop.replace(/[^0-9]/ig,"");
            var height=$(window).height()-$tableContainer.offset().top-$(window).scrollTop()-bodyPaddingHeight;
            return height;
        };
      $(function () {
          layui.use(['layer', 'form'], function(){
              let layer = layui.layer
                  ,form = layui.form;
              initPriceRuleTable();
              initRuleConfigTable();
          });
      })
    </script>
</section>
</html>